<!-- 轮播图管理-轮播图 -->
<template>
  <div class="pad banner">
    <div class="head">
      <span>轮播图管理</span>
      <el-button
        circle
        icon="el-icon-plus"
        type="primary"
        @click="openAddDialog"
      ></el-button>
    </div>
    <div class="m-t-b">
      <el-table :data="bannerList" stripe border v-loading="loading">
        <el-table-column label="轮播图名称" prop="bannerName"></el-table-column>
        <el-table-column label="轮播图片排序" prop="sort"></el-table-column>
        <el-table-column label="轮播图图片">
          <template slot-scope="scope">
            <img v-if="scope.row.bannerUrl" :src="scope.row.bannerUrl" @click="showBigImg(scope.row)" />
            <span v-else>图片地址不可用</span>
          </template>
        </el-table-column>
        <el-table-column label="用途">
          <template slot-scope="scope">
            <el-tag type="success">{{bannerTypes[scope.row.bannerType - 1]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createDate"></el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              active-text="启用"
              inactive-text="禁用"
              v-model="scope.row.enable"
              @change="changeStatus($event, scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              circle
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="flex m-t-b"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handlePagi"
        :total="total">
      </el-pagination>
    </div>
    <div class="img-mask" v-if="showImg" @click="showImg = false">
      <img :src="bigImgUrl" @click.stop="() => {}" />
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="showDialog">
      <el-form :model="banner" label-position="top">
        <el-form-item label="上传图片" style="display: block;">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="true"
            :http-request="customUpload"
          >
            <img v-if="banner.imgUrl" :src="banner.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图名称">
          <el-input v-model="banner.name" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="banner.sort" />
        </el-form-item>
        <el-form-item label="用途">
          <el-radio-group v-model="banner.type">
            <el-radio
              v-for="(item, index) in bannerTypes"
              :key="index"
              :label="index + 1"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="submitBanner"
        :loading="isDoing"
      >提交</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { uploadImage } from '../api/index';
import { fileToBase64, formatDate } from '../util/index';
import { addBanner, updateBanner, getBannerListByPage, updateBannerStatus } from '../api/banner';
import { deleteBanner } from '../api/version2';
export default {
  name: 'Banner',
  data () {
    return {
      dialogTitle: '添加轮播图',
      showDialog: false,
      showImg: false,
      bannerTypes: [
        '健康尺', '知心意', '消防小程序'
      ],
      banner: {
        name: '',
        imgUrl: '',
        sort: '',
        file: '',
        type: 1,
      },
      bigImgUrl: '',
      total: 0,
      isDoing: false,
      loading: false,
      pageSize: 10,
      curPage: 1,
      bannerList: [],
    }
  },
  methods: {
    customUpload ({ file }) { // 自定义上传图片
      const _this = this;
      this.banner.file = file
    },
    openAddDialog () { // 打开修改弹出框
      this.dialogTitle = '添加轮播图';
      this.showDialog = true
    },
    handleDelete (row) { // 删除轮播图
      this.$confirm(`确定删除该轮播图吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        deleteBanner(row.bannerId)
        .then(res => {
          this.$message.success('删除成功');
          this.fetchBannerList(1);
          this.showDialog = false
        })
        .catch(e => {})
      })
      .catch(err => {})
    },
    handlePagi (page) { // 分页事件
      this.curPage = page;
      this.fetchBannerList(page)
    },
    showBigImg (row) { // 轮播图查看大图
      this.bigImgUrl = row.bannerUrl;
      this.showImg = true
    },
    changeStatus (e, row) { // 切换状态
      this.$confirm(`确定 ${e ? '启用' : '禁用'} 轮播图${row.bannerName}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(res => {
        updateBannerStatus(row.bannerId, Number(e))
        .then(r => {
          this.$message.success('修改成功');
          this.fetchBannerList(this.curPage)
        })
        .catch(e => {

        })
      })
      .catch(err => {
        row.enable = !e
      })
    },
    submitBanner () { // 提交轮播图
      this.isDoing = true;
      const formData = new FormData();
      formData.append('file', this.banner.file);
      formData.append('bannerName', this.banner.name);
      formData.append('sort', this.banner.sort);
      formData.append('bannerType', this.banner.type);
      addBanner(formData)
      .then(res => {
        this.isDoing = false;
        this.$message.success('创建成功!');
        this.fetchBannerList(1);
        console.log(res)
      })
      .catch(e => {
        this.isDoing = false
      })
    },
    fetchBannerList (index) { // 分页查询轮播图
      this.loading = true;
      getBannerListByPage({
        index,
        count: this.pageSize
      }) 
      .then(res => {
        this.loading = false;
        const list = res.data.data.list || [];
        this.total = res.data.data.totalRecord || 0;
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'ZH');
          item.enable =  Boolean(item.isDefault)
        });
        console.log(list);
        this.bannerList = list
      })
      .catch(e => {
        this.loading = false
      })
    }
  },
  created () {
    this.fetchBannerList(1)
  }
}
</script>
<style lang="scss">
  .img-mask {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .6);
  }
</style>

